<template>
    <div class="intelligentResult">
        <!-- 输入车牌组件 -->
        <CarKey ref="carKey" @getCarNo="getCarNo"></CarKey>
        <h3 class="pageTitle">智能定责结果</h3>
        <div class="result-sec">
            <p>根据上传的照片判断</p>
            <div class="result-rows">
                <div class="l-c">车牌号</div>
                <div class="r-c">{{allRes.carNo}}</div>
            </div>
            <div class="result-rows">
                <div class="l-c">违反了</div>
                <div class="r-c">{{accidentInfo.accidentResult}}</div>
            </div>
            <div class="duty-sec">
                <div class="duty-l">
                    <h2>全责</h2>
                    <p>{{allRes.carNo}}</p>
                </div>
                <div class="duty-r">
                    <h2>无责</h2>
                    <p>{{noRes.carNo}}</p>
                </div>
            </div>
            <!-- <p class="f012">事故编号：<span>{{params.accidentNo}}</span></p> -->
            <p class="f012">请将智能责任校验结果告知对方车主，友好协商任意一方对结果有异议，请点击“不同意”，案件将流转至交警远程处理，双方对结果无异议，请点击“同意”</p>
            <p class="f012">注：如任何一方行驶证、驾驶证状态异常，则责任认定需交警重新审核</p>
        </div>
        
        <!-- 本方信息显示区 -->
        <p class="f012 setWidth">驾驶员本人及车辆信息</p>
        <div class="info-sec">
            <div class="info-rows">
                <div>车牌号码</div>
                <div class="wrap-sec w2_4">
                    <input type="text" placeholder="请选择车牌" onfocus="this.blur()" unselectable="on" ref="carId" readonly @click="updateCardId(getResInfo)" v-model="params.carNo">
                    <div class="fun-sec">
                        <input id="camera" capture="camera" accept="image/jpeg,image/jpg" type="file" @change="addImg()" style="display:none">
                        <span :class="{vnone:!getResInfo}" class="camera" @click="recognizeCar"></span><span class="arrows" @click="changeInfo"></span>
                    </div>
                </div>
                <mu-bottom-sheet :open.sync="open">
                    <mu-list :value="carVal">
                    <mu-list-item button :value="allRes.carNo" @click='closeBottomSheet(allRes)'>
                        <mu-list-item-action></mu-list-item-action>
                        <mu-list-item-title>{{allRes.carNo}}</mu-list-item-title>
                    </mu-list-item>
                    <mu-list-item button :value="noRes.carNo" @click='closeBottomSheet(noRes)'>
                        <mu-list-item-action></mu-list-item-action>
                        <mu-list-item-title>{{noRes.carNo}}</mu-list-item-title>
                    </mu-list-item>
                    </mu-list>
                </mu-bottom-sheet>
            </div>
            <div class="info-rows add-border-top">
                <div>姓名</div>
                <input class="w2_4" onfocus="this.blur()" unselectable="on" type="text" readonly v-model="params.driverName">
            </div>
            <div class="info-rows add-border-top">
                <div>责任认定</div>
                <input class="w2_4" onfocus="this.blur()" unselectable="on" type="text" readonly v-model="getResInfo">
            </div>
            <div class="info-rows add-border-top">
                <div>手机号码</div>
                <input class="w2_4" onfocus="this.blur()" unselectable="on" type="tel" placeholder="请输入手机号" readonly v-model="params.mobile">
            </div>
            <!-- <div class="info-rows add-border-top">
                <div>验证码</div>
                <div class="wrap-sec w2_4">
                    <input type="text">
                    <button class="code-btn">获取验证码</button>
                </div>
            </div> -->
        </div>       
        <!--  手动录入对方信息  -->
        <!-- 底部button区 -->
        <div class="bottomBtnSec">
            <mu-container class="demo-container">
                <mu-row gutter>
                    <mu-col span="6">
                        <div class="grid-cell">
                            <mu-button @click="chooseResuilt(10)" style="height:.48rem;font-size:.18rem" color="#6794F5" full-width>不同意</mu-button>
                        </div>
                    </mu-col>
                    <mu-col span="6">
                        <div class="grid-cell">
                            <mu-button @click="chooseResuilt(9)" style="height:.48rem;font-size:.18rem" color="#6794F5" full-width>同意</mu-button>
                        </div>
                    </mu-col>
                </mu-row>
            </mu-container>
        </div>
    </div>    
</template>
<script>
import {http} from 'utils/request.js';
import api from '../../api/index.js';
import {isIos} from '../../config/env.js';
import CarKey from '../../components/carKey/carKey';
import {getImgToken, upLoadImg, getAccidentInfo, getOCRResult, compressImg} from 'utils/commonUtil.js';
export default {
    name: "intelligentResult",
    data() {
        return {
            open: false,
            datas: {},
            resType: "", //默认全责
            carId:"",
            carVal: "",
            accidentInfo:{}, //事故信息
            carInfo:[],//车辆信息
            allRes:{}, //全责信息
            noRes: {}, //无责信息
            carList: {
                mainCarNo: "",
                minerCarNo: ""
            },
            params: {
                carId: "",  //车辆id
                accidentNo: "", //事故编号
                driverName: "",
                carNo: "",  //车牌号
                mobile: "", //手机
                carStatus: "",  //车辆状态
                fromTo: "1", //是否本方车辆 1 本方 0 对方
                dutyPercent: "" //责任划分
            }
        }
    },
    created() {
        document.title = '智能定责';
    },
    components: {
        CarKey
    },
    watch:{
        "params.carNo"() {
            //全责
            if(this.params.dutyPercent=="1") {
                this.allRes.carNo = this.params.carNo;
            }else {
                this.noRes.carNo = this.params.carNo;
            }
            this.carVal = this.params.carNo;
        }
    },
    mounted() {        
        //事故编号
        const accidentNo = this.$route.query.accidentNo;
        this.params.accidentNo = accidentNo;
        getAccidentInfo(accidentNo).then((res)=>{
            const accidentInfoBean = res.resultObj.accidentInfoBean;
            const carInfo = res.resultObj.carInfoBeans;
            this.accidentInfo = accidentInfoBean;
            //姓名电话
            this.params.driverName = accidentInfoBean.appliName;
            this.params.mobile = accidentInfoBean.appliMobile;
            //car信息
            for(var data of carInfo) {
                //全责
                if(data.dutyPercent=="1") {
                    this.allRes = data;
                    this.carList.mainCarNo = data.carNo;
                //无责    
                }else{
                    this.noRes = data;
                    this.carList.minerCarNo = data.carNo;
                }
            };
        }).catch((error) =>{
            console.log(error);
        });
    },
    computed: {
        getResInfo() {
            const dutyPercent = this.params.dutyPercent;
            if(dutyPercent == "1") {
                return "全责"
            } else if(dutyPercent == "2"){
                return "主责"
            } else if(dutyPercent == "3") {
                return "同责"
            }else if(dutyPercent == "4") {
                return "次责"
            }else if(dutyPercent == "5") {
                return "无责"
            };
        }
    },
    methods: {
        getCarNo(value) {
            this.params.carNo = value;
            this.$refs.carKey.closeKey();
        },
        updateCardId(val) {
            if(val) {
                this.$refs.carKey.openKey();
                // this.$prompt('请输入车牌', '提示', {
                // inputValue:this.params.carNo,
                // validator (value) {
                //     console.log(value);
                //     return {
                //         valid: value.trim().length==7||value.trim().length==8&&/^[\u4e00-\u9fa5][A-Za-z][A-Za-z0-9]/.test(value),
                //         message: '请输入正确的车牌号'
                //     }
                // }
                // }).then(({ result, value }) => {
                //     if (result) {
                //         this.params.carNo = value;
                //     };
                // });
            }
        },
        //切换车辆信息
        changeInfo() {
            this.open = !this.open;
        },
        //选择车牌号.carNo, allRes.carId, allRes.dutyPercent
        closeBottomSheet(value) {
            //控制选中状态
            this.carVal = value.carNo;
            //选中车牌号赋值
            this.params.carNo = value.carNo;
            //选中车牌号的id  todo
            this.params.carId = value.carId;
            sessionStorage.setItem('carId',this.params.carId);
            //责任
            this.params.dutyPercent = value.dutyPercent;
            this.open = false;
        },
        //点击同意或不同意
        chooseResuilt(state) {
            if(!this.checkFormat()) return;
            this.params.carStatus = state;
            //保存事故信息
            http.post(api.API_ACCIDENT_UPDATE,this.params).then(((res) => {
                if(res.code=="1") {
                    //点击同意跳转 
                    if(state=="9") {
                        this.$router.push({
                            name:"oppositeSideInfo",
                            query: {
                                accidentNo: this.params.accidentNo, //事故编号
                                carId: this.params.carId //车辆id
                            }
                        });
                    }else { //本人不同意-跳转填写两方信息
                        this.$router.push({
                            name: "supplement",
                            query: {
                                accidentNo: this.params.accidentNo, //事故编号
                                // carId: this.params.carId,  //车辆id
                                fromPage: 'intelligentResult'
                            }
                        });
                    }
                }
            })).catch((error) =>{
                console.log(error);
            });
        },
        checkFormat() {
            var reg_carNo = /^[\u4e00-\u9fa5][A-Za-z][A-Za-z0-9]/; // 校验车牌，不限长度
            if(this.params.carNo==""){
                this.$toast.message({
                        message: '请选择车牌号',
                        color: '#F57979'
                });
                return false;
            };
            // 常规小型私家车和新能源车牌长度分别为7位、8位
            if(!(reg_carNo.test(this.params.carNo) && (this.params.carNo.length == 7 || this.params.carNo.length == 8))) {
                    this.$toast.message({
                        message: '系统识别到您的车牌有误，请修正。',
                        color: '#F57979'
                    });
                return false;
            };
            return true;
        },
        recognizeCar() {
            document.querySelector("#camera").click();
        },
        addImg() {
            const params = {};
           params.timestamp = Date.now();
           const file = event.target.files[0];
           console.log("压缩前",file);
           compressImg(file).then((res)=>{
               console.log("压缩后",res.file);
               params.file = res.file;
               return getImgToken();
           }).then(res=>{
                    params.token = res.resultObj;
                    return upLoadImg(params)
            }).then(res=>{
                this.getCarResult(res.key);
            });
        },
        //只能识别车牌
        getCarResult(key) {
            getOCRResult("03",key).then((res)=>{
                if(res.code=="1" && res.resultObj && res.resultObj.result) {
                    const result = res.resultObj.result.result;
                    for(var val in result) {
                        if(result[val][0]&&result[val][0][0]) {
                            this.params.carNo = result[val][0][0];
                        }else{
                            this.$toast.message({
                                message: '无法识别车牌信息',
                                color: '#F57979'
                            });
                        }
                    };
                }
            }).catch((error) =>{
                console.log(error);
            });
        }
    },
}
</script>

<style lang="scss" scoped>
    @import "~assets/css/mixin.scss";
    .intelligentResult {        
        background: url(../../assets/img/intelligentResultbg.png) no-repeat;
        background-size: 100% auto;
        background-color: rgb(245, 246, 248);
    }
    .pageTitle {
        text-align: center;
        font-size: 0.2rem;
        line-height: 0.5rem;
        color: #fff;
    }
    .result-sec {
        width: 3.45rem;
        height: auto;
        margin: 0 auto;
        padding: 0.1rem;
        font-size: 0.16rem;
        border-radius: 0.05rem;
        background-color: #fff;
    }
    .result-rows {
        display: flex;
        justify-content: space-between;
        margin: 0.1rem 0;
    }
    .l-c {
        width: auto;
    }
    .r-c {
        width: 2.6rem;
        color: #6794F5;
    }
    .duty-sec {
        width: 3.25rem;
        height: 0.89rem;
        margin: 0 auto;
        text-align: center;
        display: flex;
        justify-content: space-between;
        border-radius: 0.05rem;
        overflow: hidden;
    }
    .duty-r, 
    .duty-l {
        width: 50%;
    }
    .duty-l {
        background-color: #6794F5;
        color: #fff;
    }
    .duty-r {
        background-color: #DFE5F0;
        color: #A8B0BE;
    }
    .duty-sec h2 {
        font-size: 0.22rem;
        line-height: 0.5rem;
        margin: 0.08rem 0 0 0;
    }
    .duty-sec p {
        font-size: 0.16rem;
    }
    .f012 {
        font-size: 0.12rem;
        color: #8D9093;
        margin: 0.1rem 0;
    }
    .info-sec {
        background-color: #fff;
        padding: 0 0 0 0.15rem;
        input {
            color:#8D9093;
        }
    }
    .info-sec .info-rows {
        padding: 0 0.15rem 0 0;
        font-size: 0.16rem;
    }
    .info-sec .info-rows input {
        border: none;
        height: 0.5rem;
    }
    .setWidth {
        width: 3.45rem;
        margin: 0.1rem auto;
    }
    .add-border-top {
        border-top: 1px solid #D8D8D8;
    }
    .fun-sec {
        display: flex;
        justify-content: space-between;
    }
    .fun-sec span {
        display: inline-block;
        width: 0.22rem;
        height: 0.2rem;
        
    }
    .camera {
        background: url(../../assets/img/camera.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 0.1rem;
    }
    .arrows {
        background: url(../../assets/img/arrows.png) no-repeat;
        background-size: 100% 100%;
    }
    .wrap-sec {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }   
    .w2_4 {
        width: 2.4rem;
    }
    .f-t {
        font-weight: 700;
    }

    .bottomBtnSec{
        margin: rem(15) rem(7);
    }

    .loading-container {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        display: none;
    }
    .loading-Wrap {
        width: 2.7rem;
        height: 3.4rem;
        background-color: #fff;
        border-radius: 0.05rem;
        margin: 0 auto;
    }
    .loading-img {
        display: inline-block;
        width: 1.88rem;
        height: 2.2rem;
        margin: 0.2rem auto;
    }
    .loading-Wrap .f015 {
        font-weight: 700;
    }
    .f015 {
        font-size: 0.15rem;
        color: #3D4042;
    }
    .f012 {
        font-size: 0.12rem;
    }
    .fc_AEB3B7 {
        color: #AEB3B7;
    }

    .accidentPic {
        width: 100%;
        height: 2.65rem;
        background-color: #fff;
    }
    .pciList {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 1.28rem;
    }
    .pciList li {
        width: 1.05rem;
        height: 1.05rem;
        border-radius: 0.05rem;
        background-color: #D8D8D8;
        position: relative;
    }
    .pciList .p_a {
        font-size: 0.12rem;
        line-height: 0.25rem;
        color: #fff;
        text-align: center;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .hide {
        opacity: 0;
    }

    .code-btn {
        width: 0.8rem;
        height: 0.34rem;
        background-color: #F0F0F0;
        border-radius: 4px;
        color: #CBCBCB;
        font-size: 0.12rem;
        outline: none;
        border: none;
    }
    .codePicSec {
        width: 100%;
        height: auto;
        margin: 0.4rem 0;
    }
    .codePic {
        width: 2.62rem;
        height: 2.62rem;
        margin: 0 auto;
        background-color: #fff;
    }
    .codePicSec .f012 {
        text-align: center;
        line-height: 0.34rem;
    }
    .btnRows {
        display: flex;
        justify-content: space-around;
        text-align: center;
        height: 0.8rem;
    }
    .btnRows button {
        width: 1.66rem;
        height: 0.48rem;
        background-color: #6794F5;
        outline: none;
        border: none;
        border-radius: 4px;
        color: #fff;
        font-size: 0.18rem;
    }
    .none {
        display: none;
    }
    .vnone {
        visibility: hidden;
    }
</style>

